<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>配置自定义SQL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-textarea.is-disabled .el-textarea__inner{
            color: #606266;
            background-color: #fff;
        }
        .el-textarea.is-disabled .el-textarea__inner{
            cursor: default
        }
        .el-descriptions-item__label{
            width: 80px;
        }
        .el-checkbox__inner {
            z-index: 0;
        }
        .connection-label{
            font-size: 14px;
            background-color: rgb(245, 245, 245);
            padding: 5px 10px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak style="padding: 15px;">
        <el-form :model="form" :rules="rules" ref="contract" :inline-message="true" style="width: 100%">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-tabs disabled v-model="form.SQL_Type" type="card" @tab-click="handleClick" :before-leave="beforeTabLeave">
                        <el-tab-pane v-if="action=='Add'||action=='Modify'&&form.SQL_Type=='0'||true" label="模板拖拽配置" name="0"></el-tab-pane>
                        <el-tab-pane v-if="action=='Add'||action=='Modify'&&form.SQL_Type=='1'||true" label="自定义SQL配置" name="1"></el-tab-pane>
                    </el-tabs>
                </el-col>
                <el-col :span="24">
                    <div class="table_titel">
                        <div class="titel">查询表名</div>
                    </div>
                    <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="SQL标识">
                            <el-form-item prop="SQL_SerialNumber" :rules="[{ required: true, message: '请输入SQL标识', trigger: 'blur' }]">
                                <el-input placeholder="请输入SQL标识" v-model.trim="form.SQL_SerialNumber"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="SQL名称">
                            <el-form-item prop="SQL_Name" :rules="[{ required: true, message: '请输入SQL名称', trigger: 'blur' }]">
                                <el-input placeholder="请输入SQL名称" v-model.trim="form.SQL_Name"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <template v-if="form.SQL_Type == '0'">
                            <el-descriptions-item label="查询表名">
                                <el-form-item prop="SQL_SerialNumber">
                                    <el-select style="width: 100%;" filterable  v-model="tableName" placeholder="请选择查询的表">
                                        <el-option v-for="item in table.filter(i=>!blacklist.some(j=>j==i.TABLE_NAME)&&!selecteTable.some(j=>j==i.TABLE_NAME))"
                                            :key="item.TABLE_NAME" :label="(item.TABLE_COMMENT?item.TABLE_COMMENT:'暂无表说明') + '('+item.TABLE_NAME+')'" :value="item.TABLE_NAME"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="关联表名">
                                <el-form-item prop="SQL_Name">
                                    <el-select style="width: 100%;" filterable  v-model="selecteTable" multiple collapse-tags placeholder="请选择查询的表">
                                        <el-option v-for="item in table.filter(i=>!blacklist.some(j=>j==i.TABLE_NAME)&&i.TABLE_NAME!=tableName)"
                                            :key="item.TABLE_NAME" :label="(item.TABLE_COMMENT?item.TABLE_COMMENT:'暂无表说明') + '('+item.TABLE_NAME+')'" :value="item.TABLE_NAME"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>
                        </template>
                    </el-descriptions>
                </el-col>                
                <el-col :span="24" v-if="form.SQL_Type == '0'">
                    <div class="table_titel">
                        <div class="titel">关联关系</div>
                    </div>
                    <div style="height: 500px;overflow: auto;position: relative; background: rgb(245, 245, 245); width: 100%;">
                        <!-- 主表表单 -->
                        <div v-if="tableName && tableData.length > 0" :id="tableName" style="background: rgb(255, 245, 199); width: 200px; border: 2px solid #fddb69; font-size: 14px;  position: absolute;cursor: move;"
                            :style="{...location(tableName)}">
                            <el-tooltip class="item" effect="dark" :content="tableName" placement="left">
                                <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px; background-color: rgb(252, 225, 109); font-weight: 700;">{{tableName}}</div>
                            </el-tooltip>
                            <div style="display: flex;flex-direction: column;">
                                <div v-for="(item,index) in tableData" :style="{borderBottom:index==tableData.length-1?'none':'1px solid #fddb69'}" :key="index" :id="tableName+'.'+item.COLUMN_NAME" 
                                    style="width: 100%;height: 30px;display: flex;align-items: center;">
                                    <el-tooltip class="item" effect="dark" :content="item.COLUMN_NAME" placement="right">
                                        <div style="margin: 0 10px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px;">{{item.COLUMN_NAME}}</div>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                        <!-- 关联表单 -->
                        <div v-for="obj in subTable" :key="obj.tableName" :id="obj.tableName" style="background: rgb(241, 241, 241); width: 200px; font-size: 14px; position: absolute;cursor: move;"
                            :style="{...location(obj.tableName), border:lineList.some(i=>i.targetId == obj.tableName)?'2px solid #acacac':'2px solid red'}" >
                            <el-tooltip class="item" effect="dark" :content="obj.tableName" placement="left">
                                <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px; background-color: #ccc; font-weight: 700;">{{obj.tableName}}</div>
                            </el-tooltip>
                            <div style="display: flex;flex-direction: column;">
                                <div v-for="(item,index) in obj.tableData" :style="{borderBottom:index==obj.tableData.length-1?'none':'1px solid #ccc'}" :key="index" :id="obj.tableName+'.'+item.COLUMN_NAME" 
                                    style="width: 100%;height: 30px;display: flex;align-items: center;">
                                    <el-tooltip class="item" effect="dark" :content="item.COLUMN_NAME" placement="left">
                                        <div style="margin: 0 10px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center; line-height: 30px;">{{item.COLUMN_NAME}}</div>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="24" v-else-if="form.SQL_Type == '1'">
                    <div class="table_titel">
                        <div class="titel">自定义SQL</div>
                    </div>
                    <el-input :autosize="{ minRows: 18}" type="textarea" v-model="SQL"></el-input>
                </el-col>
                <el-col :span="24">
                    <div class="table_titel">
                        <div class="titel">查询字段</div>
                        <div class="operation">
                            <el-button type="primary" size="small" @click="dialogVisible2 = true">添加字段</el-button>
                            <el-button :type="isSort?'danger':'success'" size="small"
                                @click="isSort = !isSort">{{isSort?'保存':'调整顺序'}}</el-button>
                        </div>
                    </div>
                    <el-table v-if="isTable" id="table" :row-style="rowStyle" border :data="allTableData" height="500px" style="width: 100%">
                        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
                        <template v-if="form.SQL_Type == '0'"> 
                            <el-table-column align="center" show-overflow-tooltip prop="TABLE_NAME" label="所属表名" min-width="160"></el-table-column>
                            <el-table-column align="center" show-overflow-tooltip prop="COLUMN_NAME" label="查询字段" min-width="160"></el-table-column>
                        </template>
                        <el-table-column align="center" prop="Name" label="指定字段名称" min-width="160">
                            <template v-slot="{row}">
                                <el-input :disabled="!row.isShow" placeholder="可输入指定字段名称" v-model="row.NickName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="COLUMN_COMMENT" label="指定表头名称" min-width="160">
                            <template v-slot="{row}">
                                <el-input :disabled="!row.isShow" placeholder="可输入指定表头名称" v-model="row.COLUMN_COMMENT"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="Column_Width" label="字段最小长度(px)"  width="160">
                            <template v-slot="{row}">
                                <el-input :disabled="!row.isShow" placeholder="请输入字段长度" v-model="row.Column_Width"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="Column_Type" label="字段类型"  width="110">
                            <template v-slot="{row}">
                                <el-select style="width: 100%;" :disabled="!row.isShow" filterable  v-model="row.Column_Type" placeholder="请选择字段类型">
                                    <el-option v-for="(obj,key) in columnType" :key="key" :label="obj" :value="key"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="Show_Overflow_Tooltip" label="文字过长缩进" width="110">
                            <template v-slot="{row}">
                                <el-switch :disabled="!row.isShow" v-model="row.Show_Overflow_Tooltip"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="Column_Align" label="文字位置" width="240">
                            <template v-slot="{row}">
                                <el-radio-group :disabled="!row.isShow" v-model="row.Column_Align">
                                    <el-radio label="left">居左</el-radio>
                                    <el-radio label="center">居中</el-radio>
                                    <el-radio label="right">居右</el-radio>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="Role" label="权限" width="160">
                            <template v-slot="{row}">
                                <el-select style="width: 100%;" :disabled="!row.isShow" filterable  v-model="row.Role" placeholder="请选择适用权限">
                                    <el-option v-for="(item, index) in role" :key="index" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="显示" width="90">
                            <template v-slot="{row}">
                                <el-switch v-model="row.isShow"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="90">
                            <template v-slot="{row,$index}">
                                <el-button type="danger" size="small" @click="removeTable(row,$index)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <template v-if="form.SQL_Type == '0'">
                    <el-col :span="24">
                        <div class="table_titel">
                            <div class="titel">条件查询</div>
                            <div class="operation">
                                <el-button @click="handleDistinct" :type="form.Distinct=='1'?'danger':'primary'" size="small">{{form.Distinct=='1'?'取消去重':'数据去重'}}</el-button>
                                <el-button @click="add_condition" type="primary" size="small">新增</el-button>
                                <el-button @click="remove_condition" type="danger" size="small">删除</el-button>
                            </div>
                        </div>
                        <el-descriptions :column="3" border size="small" v-for="(item,index) in condition" :key="index">
                            <el-descriptions-item label="筛选字段">
                                <el-form-item prop="COLUMN_NAME">
                                    <el-select style="width: 100%;" :disabled="item.Logic=='{?}'" filterable  v-model="item.COLUMN_NAME" placeholder="请选择筛选字段">
                                        <el-option v-for="item in tableNames" :key="item.TABLE_NAME + item.COLUMN_NAME" 
                                            :label="item.TABLE_NAME + '.`' + item.COLUMN_NAME + '`'" :value="item.TABLE_NAME + '.`' + item.COLUMN_NAME + '`'"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="逻辑条件">
                                <el-form-item prop="Logic">
                                    <el-select style="width: 100%;" filterable  v-model="item.Logic" placeholder="逻辑条件">
                                        <el-option label="大于" value=">"></el-option>
                                        <el-option label="等于" value="="></el-option>
                                        <el-option label="不等于" value="<>"></el-option>
                                        <el-option label="小于" value="<"></el-option>
                                        <el-option label="包含" value="LIKE"></el-option>
                                        <el-option label="不包含" value="NOT LIKE"></el-option>
                                        <el-option v-if="!condition.some(i => i.Logic == '{?}')||item.Logic == '{?}'" label="自定义片段" value="{?}"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="比较值">
                                <el-form-item prop="Value">
                                    <el-input v-model.trim="item.Value" :disabled="item.Logic=='{?}'" placeholder="请输入比较值(外部传值可用?)"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                    <el-col :span="24">
                        <div class="table_titel">
                            <div class="titel">排序方式</div>
                            <div class="operation">
                                <el-button @click="add_order" type="primary" size="small">新增</el-button>
                                <el-button @click="remove_order" type="danger" size="small">删除</el-button>
                            </div>
                        </div>
                        <el-descriptions :column="3" border size="small" v-for="(item,index) in order" :key="index">
                            <el-descriptions-item label="指定字段">
                                <el-form-item prop="COLUMN_NAME">
                                    <el-select style="width: 100%;" filterable  v-model="item.COLUMN_NAME" placeholder="请选择筛选字段">
                                        <el-option v-for="item in tableNames" :key="item.TABLE_NAME + item.COLUMN_NAME" 
                                            :label="item.TABLE_NAME + '.`' + item.COLUMN_NAME + '`'" :value="item.TABLE_NAME + '.`' + item.COLUMN_NAME + '`'"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="排序方式">
                                <el-form-item prop="Mode">
                                    <el-select style="width: 100%;" filterable v-model="item.Mode" placeholder="排序方式">
                                        <el-option label="正序" value=""></el-option>
                                        <el-option label="倒叙" value="DESC"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                    <el-col :span="24">
                        <div class="table_titel">
                            <div class="titel">SQL预览</div>
                        </div>
                        <el-input disabled :autosize="{ maxRows:18, minRows: 18}" type="textarea" :value="sqlString"></el-input>
                    </el-col>
                </template>
            </el-row>
            <el-dialog title="关联属性" :visible.sync="dialogVisible" width="700px">
                <el-descriptions :column="2" border size="small">
                    <el-descriptions-item label="1.表名">
                        <el-input :value="selectLine.sourceId" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="2.表名">
                        <el-input :value="selectLine.targetId" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="1.字段名">
                        <el-input :value="selectLine.sourceUuid?selectLine.sourceUuid.slice(0, -2).split('.')[1]:''" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="2.字段名">
                        <el-input :value="selectLine.targetUuid?selectLine.targetUuid.slice(0, -2).split('.')[1]:''" disabled></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="连接方式">
                        <el-select style="width: 100%;" v-model="selectLine.Join" placeholder="请选择连接方式">
                            <el-option v-for="item in Join" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-descriptions-item>
                </el-descriptions>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel">返 回</el-button>
                    <el-button type="success" @click="submitSave">保 存</el-button>
                    <el-button type="danger" @click="removeSave">删 除</el-button>
                </span>
            </el-dialog>
            <el-dialog :visible.sync="dialogVisible2" width="700px" :close-on-click-modal="false">
                <template #title>
                    <span class="el-dialog__title">请选择要添加的字段</span>
                </template>
                <el-select style="width: 100%;" v-model="recycle" multiple  placeholder="请选择添加的字段">
                    <el-option v-for="(item,index) in tableNames.filter(i=>!allTableData.some(x=>x.COLUMN_NAME==i.COLUMN_NAME&&x.TABLE_NAME==i.TABLE_NAME))" 
                        :key="index" :label="item.TABLE_NAME + '.' + item.COLUMN_NAME" :value="item.TABLE_NAME + '.' + item.COLUMN_NAME"></el-option>
                </el-select>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelRecycle">返 回</el-button>
                    <el-button :disabled="recycle.length == 0" type="success" @click="submitRecycle">确 认</el-button>
                </span>
            </el-dialog>
            <div style="height: 90px;"></div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="danger" @click="reset()">重置</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/Sortable.min.js"></script>
    <script type="text/javascript" src="../../../utils/jsplumb.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/sql_config.js"></script>
</body>

</html>